<template>
	<div class="header">
		<img src="@/assets/img/mobile/logo.png" class="logo"/>
		<ul class="menus" >
			<li ><router-link to="/mobile/home" >首页推荐</router-link></li>
			<li ><router-link to="/mobile/bookList" >书库</router-link></li>
			<li ><router-link to="/mobile/info" >我的</router-link></li>
		</ul>
		<div class="search" @click="goSearch()">
			<!-- <form >
				<input :style="{'display':isaBool?'block':'none'}"
				placeholder="请输入手术的书籍名称" /> -->
				<!-- <aside @click="isaBool = !isaBool"> -->
					<img src="@/assets/img/mobile/search.png">
		<!-- 		</aside>
			</form> -->
		</div>
	</div>
</template>

<script>
	export default {
		name:'MobileHeader',
		data(){
			return{
				
			}
		},
		methods:{
			goSearch(){
				this.$router.push('/mobile/search')
			}
		}
	}
</script>

<style scoped>
.header{
	width: 100%;
	height: 3.5rem;
	background-color: #a68b5b;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	z-index: 10;
	
	/* position: relative; 定位的元素保留原本的位置*/
	/* position: absolute; 定位的元素抛弃原本的位置 ,被其他其他标签*/
}	
.header .logo{
	margin-left: 0.5rem;
}
.header .menus{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 55%;
	height: 100%;
	color: white;
	/* 默认显示 ；动画开始设置为隐藏状态*/
	display: block;
	
}
.header .menus li a{
	display: block;
	color: white;
	width: 33.33%;
	float: left;
	height: 3.2rem;
	line-height: 3.2rem;
	text-align: center;
}
.header .menus li  .router-link-active{
	border-bottom: 0.3rem solid gold;
	color: gold;            
}
.header .search{
	/* position: relative;
	right: 0.5rem; */
	/*默认div标签没有宽度；动画开始时；设置18.2rem的宽度 */
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid white;
	margin-right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* pc端的事件；鼠标事件 ，手指事件/手势事件touch*/
/* hover属于PC端操作，不适合在移动端运行 */
/* .header .search:hover{
	/* 动画名字，动画时常，动画速度 */
	/* animation: formWidth 1s linear; */
 /* } */ 
/* 将form宽度从2rem——>16rem */
@keyframes formWidth{
	/* 宽度从2rem开始 */
	0%{
		width: 2rem;
	}
	/* 到16rem结束 */
	100%{
		width: 20rem;
	}
}

</style>
